<template>
  <view class="page">
    <view class="page-container">
      <!-- 页面头部 -->
      <view class="page-header">
        <view class="header-info">
          <view class="welcome-text">欢迎使用</view>
          <view class="system-name">汽车管理系统</view>
        </view>
        <view class="user-info" @tap="showUserMenu">
          <view class="user-avatar">{{
            userInfo.name ? userInfo.name.slice(0, 1) : "U"
          }}</view>
        </view>
      </view>

      <!-- 功能区域 -->
      <view class="content">
        <view class="function-grid">
          <!-- 车辆管理 -->
          <view class="function-item" @tap="goToCarList">
            <view class="function-icon">🚗</view>
            <view class="function-title">车辆管理</view>
            <view class="function-desc">查看和管理车辆信息</view>
          </view>

          <!-- 车辆统计 -->
          <view class="function-item" @tap="goToStatistics">
            <view class="function-icon">📊</view>
            <view class="function-title">车辆统计</view>
            <view class="function-desc">查看车辆数据统计</view>
          </view>

          <!-- 保险管理 -->
          <view class="function-item" @tap="goToInsurance">
            <view class="function-icon">🛡️</view>
            <view class="function-title">保险管理</view>
            <view class="function-desc">管理车辆保险信息</view>
          </view>

          <!-- 维修记录 -->
          <view class="function-item" @tap="goToMaintenance">
            <view class="function-icon">🔧</view>
            <view class="function-title">维修记录</view>
            <view class="function-desc">查看维修保养记录</view>
          </view>
        </view>

        <!-- 最近动态 -->
        <view class="recent-section">
          <view class="section-title">最近动态</view>
          <view class="activity-list">
            <view
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item"
            >
              <view class="activity-icon">{{ activity.icon }}</view>
              <view class="activity-content">
                <view class="activity-title">{{ activity.title }}</view>
                <view class="activity-time">{{ activity.time }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

/**
 * 页面标题
 */
const pageTitle = '汽车管理'

/**
 * 用户信息
 */
const userInfo = ref({
  id: null,
  account: '',
  name: ''
})

/**
 * 最近活动列表
 */
const recentActivities = ref([
  {
    id: 1,
    icon: '🚗',
    title: '新增车辆：粤B12345',
    time: '2小时前'
  },
  {
    id: 2,
    icon: '🔧',
    title: '维修完成：粤A98765',
    time: '1天前'
  },
  {
    id: 3,
    icon: '🛡️',
    title: '保险到期提醒：粤C54321',
    time: '3天前'
  }
])

/**
 * 页面加载时获取用户信息
 */
onMounted(() => {
  loadUserInfo()
})

/**
 * 加载用户信息
 */
function loadUserInfo () {
  try {
    const savedUserInfo = uni.getStorageSync('userInfo')
    if (savedUserInfo) {
      userInfo.value = savedUserInfo
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

/**
 * 显示用户菜单
 */
function showUserMenu () {
  uni.showActionSheet({
    itemList: ['个人资料', '设置', '退出登录'],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          goToProfile()
          break
        case 1:
          goToSettings()
          break
        case 2:
          handleLogout()
          break
      }
    }
  })
}

/**
 * 跳转到车辆列表
 */
function goToCarList () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到统计页面
 */
function goToStatistics () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到保险管理
 */
function goToInsurance () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到维修记录
 */
function goToMaintenance () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到个人资料
 */
function goToProfile () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到设置
 */
function goToSettings () {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 处理退出登录
 */
function handleLogout () {
  uni.showModal({
    title: '确认退出',
    content: '是否确定退出登录？',
    success: (res) => {
      if (res.confirm) {
        // 清除本地存储
        uni.removeStorageSync('token')
        uni.removeStorageSync('userInfo')

        // 跳转到登录页
        uni.redirectTo({
          url: '/pages/login/login'
        })
      }
    }
  })
}
</script>

<style scoped>
/* 页面特定样式 */

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-large);
  margin-bottom: var(--spacing-lg);
}

.header-info {
  flex: 1;
}

.welcome-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.system-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-hover)
  );
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-lg);
}

/* 功能网格样式 */
.function-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.function-item {
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.function-item:active {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.function-icon {
  font-size: 64rpx;
  margin-bottom: var(--spacing-base);
}

.function-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.function-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 最近动态样式 */
.recent-section {
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
}

.activity-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.activity-time {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* 响应式适配 */
@media screen and (max-width: 750px) {
  .function-grid {
    gap: var(--spacing-base);
  }

  .function-item {
    padding: var(--spacing-lg);
  }

  .function-icon {
    font-size: 48rpx;
  }

  .page-header {
    padding: var(--spacing-lg);
  }

  .user-avatar {
    width: 60rpx;
    height: 60rpx;
    font-size: var(--font-size-base);
  }
}
</style>